<template>
  <DesignerContainer
    ref="container"
    :formData="formData"
    :formItems="formItems"
    @submit="onSubmit"
  />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import DesignerContainer from "@/components/FormDesigner/DesignerContainer.vue";

const container = ref(null);

onMounted(() => {
  // @ts-ignore
  console.log(container.value.getDynamicForm());
});

const formData = ref({
  Input_1637029608507: "1",
});

// 提交事件
const onSubmit = () => {
  console.log(formData.value);
};

const formItems = ref([
  {
    labelWidth: 100,
    tag: "el-input",
    type: "Input",
    props: {
      size: "medium",
      disabled: false,
      readonly: false,
      clearable: false,
      suffixIcon: "",
      prefixIcon: "",
      placeholder: "输入框",
    },
    label: "输入框",
    modelValue: "Input_1637029608507",
    selectCurrent: false,
  },
]);
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
</style>
